<template>
	<view class="uni-card" v-if="data !== undefined">
		<view class="uni-card-header uni-card-media" @tap="goUserDetail(data.createdBy)">
			<image class="uni-card-media-logo" lazy-load  :src="data.baseUrl + data.imgUrl"></image>
			<view class="uni-card-media-body">
				<view class="uni-card-media-text-top">
					<text >{{data.nickname}}</text>
					<view style="margin-left: 5px; color: #b53df3;" v-if="data.gender=='F'" class="uni-icon uni-icon-women uni-icon-fontsize"></view>
					<view style="margin-left: 5px; color: #b53df3" v-else class="uni-icon uni-icon-man uni-icon-fontsize"></view>
					<text style="margin-left: 5px; color: #b53df3" class="uni-icon-fontsize">{{data.groupId}}</text>
				</view>
				<text class="uni-card-media-text-bottom">{{data.createdStamp}}</text>
			</view>
		</view>
		<view class="uni-cart-content" @tap="goDetail(data.showId)">
			
			<view class="content-box" v-if="data.content !== undefined">{{data.content}}</view>
			<view class="uni-uploader__files" v-if="data.showPictures !== undefined">
				<block v-for="(showPicture,index1) in data.showPictures" :key="index1">
					<view class="uni-uploader__file" v-if="index1 < 4">
						<image class="uni-uploader__img" :src="data.baseUrl +showPicture.pictureKey" v-if="index1 < 3"></image>
						<view v-if="index1 == 3" style="margin-top: 80upx; opacity: 0.8; color: #D9D9D9;">更多</view>
					</view>
				</block>
			</view>

			
		</view>
		<view class="uni-card-footer">
			<view class="uni-card-unlink uni-icon uni-icon-browse uni-icon-fontsize"  v-if="data.visitCount === undefined">
				浏览
			</view>
			<view class="uni-card-unlink uni-icon uni-icon-browse uni-icon-fontsize"  v-else-if="data.visitCount == 0">
				0
			</view>
			<view class="uni-card-link uni-icon uni-icon-browse uni-icon-fontsize"  v-else-if="data.visitCount > 1000">
				{{data.visitCount/1000}}K
			</view>
			<view class="uni-card-link uni-icon uni-icon-browse uni-icon-fontsize"  v-else>
				{{data.visitCount}}
			</view>
			<view class="uni-card-unlink uni-icon uni-icon-dianzan uni-icon-fontsize"  v-if="data.upvoteCount === undefined" @tap="addUpvote(data.showId)">
				点赞
			</view>
			<view class="uni-card-unlink uni-icon uni-icon-dianzan uni-icon-fontsize"  v-else-if="data.upvoteCount == 0" @tap="addUpvote(data.showId)">
				0
			</view>
			<view class="uni-card-link uni-icon uni-icon-dianzan uni-icon-fontsize"  v-else-if="data.upvoteCount > 1000" @tap="addUpvote(data.showId)">
				{{data.upvoteCount/1000}}K
			</view>
			<view class="uni-card-link uni-icon uni-icon-dianzan uni-icon-fontsize"  v-else>
				{{data.upvoteCount}}
			</view>
			<view class="uni-card-unlink uni-icon uni-icon-comments uni-icon-fontsize"  v-if="data.commentCount === undefined" @tap="addComment(data.showId)">
				评论
			</view>
			<view class="uni-card-link uni-icon uni-icon-comments uni-icon-fontsize"  v-else-if="data.commentCount > 1000" @tap="addComment(data.showId)">
				{{data.commentCount/1000}}K
			</view>
			<view class="uni-card-link uni-icon uni-icon-comments uni-icon-fontsize" v-else @tap="addComment(data.showId)">
				{{data.commentCount}}
			</view>
		</view>

	</view>
</template>

<script>
	
	export default {
		name: "card",
		components: {
			
		},
		props: {
			data() {
				return {
					type: Object,
					default: {
						baseUrl: "",
						imgUrl: "",
						nickname: "",
						gender: "",
						groupId: "",
						createdStamp: "",
						content: "",
						showPictures: [],
						visitCount: "",
						upvoteCount: "",
						commentCount: "",
						showId: "",
						createdBy: "",
					}
				}
				
			},
		},
		methods:{
			goDetail: function(e){
// 				console.log("go detail" +e);
// 				uni.navigateTo({
// 					url: '/pages/cms/detail?showId='+e
// 				})
				this.$emit("click",{url: '/pages/cms/detail?showId='+e});
			},
			goUserDetail: function(e){
// 				console.log(e);
// 				uni.navigateTo({
// 					url: '/pages/my/profile?partyId='+e
// 				})
				this.$emit("click",{url: '/pages/my/profile?partyId='+e})
			},
			addComment: function(e) {
				this.$emit("click",{url: '/pages/cms/detail?showId='+e})
			},
			addUpvote: function(e) {
				this.$emit("addPartyUpvote",{id: e})
			}
		}
	}
</script>

<style>
	.uni-cart-content .content-box {
		margin-left: 25upx;
		 margin-top: 5upx;
		 margin-bottom: 5upx;
		 margin-right: 25upx;
		text-align: left;
	}
	
	.uni-uploader__file  image {
		border: solid 1px #D9D9D9;
	}
	.uni-cart-content .image-view {
		display: flex;
		flex-direction: initial;
		flex-wrap: wrap;
		flex-flow: row wrap;
		flex: 4;
	}
	
	.uni-icon-fontsize {
		 font-size:28upx;
	}



	.image {
		padding: 5upx !important;
		height: 175upx;
		width: 175upx;
	}
	
	
	
</style>
